<template>
  <div>

    <ul>
      <h4>生命周期</h4>
      <li>Vue2.0==========》Vue3.0</li>
      <li>beforeCreate=====》setup</li>
      <li>created==========》setup</li>
      <li>beforeMount======》onBeforeMount</li>
      <li>mounted=========》onMounted</li>
      <li>beforeUpdate===== 》onBeforeUpdate</li>
      <li>updated========= 》onUpdated</li>
      <li>beforeDestroy==== 》onBeforeUnmount</li>
      <li>destroy========= 》onUnmounted</li>
    </ul>
    <ul>
      <h4>ref和reactive的区别</h4>
      <li>ref：创建一个包装式对象，含有一个响应式属性value</li>
      <li>reactive：创建一个响应式对象，非包装类，相当于data</li>
      <ref-syntax></ref-syntax>
      <reactive-syntax></reactive-syntax>
      <add-hook></add-hook>
      <watch-syntax></watch-syntax>
      <i-form :model="formValidate" :rules="ruleValidate">
        <i-form-item label="用户名" prop="name">
          <i-button size="small"></i-button>
        </i-form-item>
      </i-form>
      <div @click="handleClick">点击父亲先子通讯</div>
      <custom v-model="customValue"></custom>
    </ul>
  </div>
</template>

<script lang="ts">


import RefSyntax from "../ref-syntax/ref-syntax.vue";
import ReactiveSyntax from "../reactive-syntax/reactive-syntax.vue";
import AddHook from "../add-hook/add-hook.vue";
import WatchSyntax from "../watch-syntax/watch-syntax.vue";
import {defineComponent, provide, ref, onMounted,toRefs} from 'vue'
import IForm from "../i-form/i-form.vue";
import IFormItem from "../i-form/i-form-item.vue";
import IButton from "../i-button/i-button.vue";
import {dispatch, broadcast} from "../../mixins/emitter";
import Custom from "../custom/custom.vue";

export default defineComponent({
  name: "life-cycle",
  components: {Custom, IButton, IFormItem, IForm, WatchSyntax, AddHook, ReactiveSyntax, RefSyntax},
  setup(context) {
    provide('key', 'provide 传递给子组件')
    // provide('geolocation', {
    //   longitude: 90,
    //   latitude: 135
    // })
    const aa = ref('ref-syntax');
    onMounted(() => {
      console.log(aa, '99')
    })
    const handleClick = () => {
      console.log(context)
      broadcast('ref-syntax', 'on-message', 'Hello Vue.js', context)
    }
    let customValue=ref(0)
    return {
      customValue,
      handleClick
    }
  }

})

</script>

<style scoped>

</style>
